<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- react 核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- dom相关库 -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- Es6->Es5 jsx->js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="app"></div>
<!-- 使用JSX，属性使用text/babel -->
<script type="text/babel">

    //1.创建组件
    class Weather extends React.Component{
        constructor(props){
            super(props)
            this.input1 = React.createRef()

        }

        alertData = () => {
            //这里拿到的是 真实 DOM
            // const {input1} = this.refs
            console.log(this.input1)
            const input1 = this.input1.current
            console.log(input1)
            alert(input1.value)
        }

        alertData2 = () => {
            const {input2} = this.refs
            alert(input2.value)
        }

        showData = (e) => {
            console.log(e.target.value)
        }

        
        render(){
            return(
                <div>
                    {/* createRef()形式
                        React.createRef() 调用后可以直接返回一个容器，该容器可以存储被 ref 所标识的节点，该容器只能存一个元素
                    */} 
                    <input ref = {this.input1} type="text" />
                    <button onClick = {this.alertData}>点击弹出左侧输入</button>  
                    {/* 字符串形式 */}  
                    <input ref = "input2" onBlur = {this.alertData2} type="text" />
                    {/* 回调函数形式 
                    <input ref = {element => {this.input3 = element; console.log(element)}} onClick = {this.showData}  type = "text" />*/}
                    {/* 发生事件的元素正好是要修改的元素时，可以省略ref，通过 event.target 就可以实现 */}
                    <input type="text" onClick = {this.showData} />
                </div>
            )
        }

    }

    

    //渲染组件
    ReactDOM.render(<Weather/>, document.getElementById("app"))
</script>
 
</body>
</html>